<template>
	<view class="balance">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="账户余额">
			<view class="u-m-r-20" slot="right" @click="goDetail()">
				明细
			</view>

		</u-navbar>
		<view class="balance__card bg_4275FE">
			<u-cell-item :title="accountData.posProfit.accountName" :title-style="{'color': 'white'}" :arrow="false"
				:border-bottom="false">
				<u-image :src="posThumb" width="40" height="40" slot="icon" class=" mr-10"></u-image>
			</u-cell-item>

			<view class="flex mt-20 justify-between align-center">
				<view class="u-font-13">账户余额（元）</view>
				<view class="withdraw " @click="goWithdraw(accountData.posProfit)">
					去提现
				</view>
			</view>
			<view class="u-m-t-10 u-font-16">
				{{accountData.posProfit.availableBalance}}
			</view>
		</view>

		<view class="balance__card bg_E1B667">
			<u-cell-item :title="accountData.activeProfit.accountName" :title-style="{'color': 'white'}" :arrow="false"
				:border-bottom="false">
				<u-image :src="activeThumb" width="40" height="40" slot="icon" class=" mr-10"></u-image>
			</u-cell-item>
			<view class="flex mt-20 justify-between align-center">
				<view class="u-font-13">账户余额（元）</view>
				<view class="withdraw " @click="goWithdraw(accountData.activeProfit)">
					去提现
				</view>
			</view>
			<view class="u-m-t-10 u-font-16">
				{{accountData.activeProfit.availableBalance}}
			</view>
		</view>
		<view class="balance__card bg_00D0CB">
			<u-cell-item :title="accountData.flowProfit.accountName" :title-style="{'color': 'white'}" :arrow="false"
				:border-bottom="false">
				<u-image :src="flowThumb" width="40" height="40" slot="icon" class=" mr-10"></u-image>
			</u-cell-item>
			<view class="flex mt-20 justify-between align-center">
				<view class="u-font-13">账户余额（元）</view>
				<view class="withdraw " @click="goWithdraw(accountData.flowProfit)">
					去提现
				</view>
			</view>

			<view class="u-m-t-10 u-font-16">
				{{accountData.flowProfit.availableBalance}}
			</view>

		</view>
		<view class="balance__card bg_C2A5FA">
			<u-cell-item :title="accountData.otherProfit.accountName" :title-style="{'color': 'white'}" :arrow="false"
				:border-bottom="false">
				<u-image :src="otherThumb" width="40" height="40" slot="icon" class=" mr-10"></u-image>
			</u-cell-item>
			<view class="flex mt-20 justify-between align-center">
				<view class="u-font-13">账户余额（元）</view>
				<view class="withdraw " @click="goWithdraw(accountData.otherProfit)">
					去提现
				</view>
			</view>
			<view class="u-m-t-10 u-font-16">
				{{accountData.otherProfit.availableBalance}}
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountData: {},

				posThumb: "/static/image/home/icon_trans_profit.png",
				activeThumb: "/static/image/home/icon_active_profit.png",
				flowThumb: "/static/image/home/icon_trans_flow.png",
				otherThumb: "/static/image/home/icon_trans_other.png",
			}
		},

		mounted() {
			this.listMyAccount();
		},
		methods: {

			listMyAccount() {
				const _that = this;
				this.$zx.user_api.listMyAccount().then((data) => {

					console.log("data=" + JSON.stringify(data))
					this.accountData = data;
				});
			},
			goDetail() {
				this.$u.route('packageD/pages/mine/balance/balanceList')
			},
			goWithdraw(item) {
				this.$u.route({
					url: 'packageD/pages/mine/balance/withdraw',
					params: {
						item: encodeURIComponent(JSON.stringify(item)),

						bankInfo: encodeURIComponent(JSON.stringify(this.accountData.settleInfoDo))
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.balance {


		&__card {
			margin: 30rpx 30rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			color: white;
		}
	}

	.white {
		color: white;
	}

	.u-cell {
		padding: 0;
	}

	.bg_4275FE {
		background-color: #4275FE;
	}

	.bg_E1B667 {
		background-color: #E1B667;
	}

	.bg_00D0CB {
		background-color: #00D0CB;
	}

	.bg_C2A5FA {
		background-color: #C2A5FA;
	}

	.withdraw {
		border: 1rpx solid white;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		font-size: 12px;
	}
</style>